<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue 生命周期</title>
		<script src="./Dep.js"></script>
		<script src="./Watch.js"></script>
		<script src="./Observable.js"></script>
		<script src="./CompilerTemp.js"></script>
		<script src="./Vue.js"></script>
		<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
	</head>
	<body>
		<div id="app">
		    <h1>插值表达式</h1>
		    <div>{{ value }}</div>
		    <h1>v-text</h1>
		    <div v-text="value"></div>
		    <h1>v-model</h1>
		    <input type="text" v-model="value" >
			<h1>v-html</h1>
		    <div v-html="htmlValue"></div>
			<h1>v-on</h1>
			<button v-on:click="handleClick">点我呀</button>
			<button v-on:mousemove="handleMouseMove">把手移开哦</button>
		</div>
		
		<script>
			const vm = new Vue({   
				el: '#app',
				data: {
					value: '1',
					htmlValue: '<span style="color: red">文本内容</span>'
				},
				methods: {
					handleClick() {
						alert('嘻嘻~');
					},
					handleMouseMove() {
						alert('坏人~');
					}
				}
			});
		</script>
		
		<style>
			.box {
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
			.active {
				color: #55aaff;
			}
		</style>
	</body>
</html>
